<template>
  <div class="admin-page">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card shadow="always" class="card-panel">
          <div @click="getUserBlogStats(0, issueBlogCommand, '')" class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="blog" class="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              <el-dropdown :disabled="dataLoad" @command="switchIssueBlogTypeHandle">
                <span v-bind:style="{ color: 'rgba(0, 0, 0, 0.45)', cursor: 'pointer' }">
                  {{ issueBlogCommandName }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">已发布博客（月）</el-dropdown-item>
                  <el-dropdown-item :command="2">已发布博客（年）</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <count-to :start-val="0" :end-val="issueBlogNum" :duration="2600" class="card-panel-num" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card shadow="always" class="card-panel">
          <div @click="getUserBlogStats(0, blogViewCommand, '')" class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="view" class="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              <el-dropdown :disabled="dataLoad" @command="switchBlogViewTypeHandle">
                <span v-bind:style="{ color: 'rgba(0, 0, 0, 0.45)', cursor: 'pointer' }">
                  {{ blogViewCommandName }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">浏览量（月）</el-dropdown-item>
                  <el-dropdown-item :command="2">浏览量（年）</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <count-to :start-val="0" :end-val="blogViewNum" :duration="3000" class="card-panel-num" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card shadow="always" class="card-panel">
          <div @click="getUserBlogStats(0, blogLikeCommand, '')" class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="like" class="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              <el-dropdown :disabled="dataLoad" @command="switchBlogLikeTypeHandle">
                <span v-bind:style="{ color: 'rgba(0, 0, 0, 0.45)', cursor: 'pointer' }">
                  {{ blogLikeCommandName }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">点赞量（月）</el-dropdown-item>
                  <el-dropdown-item :command="2">点赞量（年）</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <count-to :start-val="0" :end-val="blogLikeNum" :duration="3200" class="card-panel-num" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-card shadow="always" class="card-panel">
          <div @click="getUserBlogStats(0, blogCommentCommand, '')" class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="comment2" class="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              <el-dropdown :disabled="dataLoad" @command="switchBlogCommentTypeHandle">
                <span v-bind:style="{ color: 'rgba(0, 0, 0, 0.45)', cursor: 'pointer' }">
                  {{ blogCommentCommandName }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">评论量（月）</el-dropdown-item>
                  <el-dropdown-item :command="2">评论量（年）</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <count-to :start-val="0" :end-val="blogCommentNum" :duration="3600" class="card-panel-num" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="never" style="width: 100%; margin-bottom: 20px;">

      <div v-show="showLineEcharts" ref="lineChart" style="width: 100%; height: 300px;"></div>

      <el-empty v-show="!showLineEcharts" description="数据为空"></el-empty>

    </el-card>
  </div>
</template>

<script>
  import CountTo from 'vue-count-to'

  /*
    后台管理页面首页面
   */
  export default {
    layout: 'admin',
    name: "admin-index",
    components: { CountTo },
    data() {
      return {
        // 用户已发布博客数量类型选中项
        issueBlogCommand: 1,
        // 用户已发布博客数量
        issueBlogNum: 0,
        // 用户已发布博客的总浏览数量类型选中项
        blogViewCommand: 1,
        // 用户已发布博客的总浏览数量
        blogViewNum: 0,
        // 用户已发布博客的总点赞数量类型选中项
        blogLikeCommand: 1,
        // 用户已发布博客的总点赞数量
        blogLikeNum: 0,
        // 用户已发布博客的总评论数量类型选中项
        blogCommentCommand: 1,
        // 用户已发布博客的总评论数量
        blogCommentNum: 0,
        // 折线图echarts对象
        lineChart: undefined,
        // 折线图echarts为空
        showLineEcharts: false,
        // 页面宽度变化任务定时器
        resizeTimer: undefined,
        // 数据是否加载[true-加载 false-不加载]
        dataLoad: false,
      }
    },
    watch: {
      collapseFlag: {
        handler(newValue, oldValue) {
          this.resizeDebounce(() => {
            if (this.lineChart) {
              // 折线图大小重构
              this.lineChart.resize()
            }
          }, 1000)
        },
        // 深度监听
        deep: true,
        // 立即执行
        immediate: true
      }
    },
    computed: {
      /**
       * 侧边菜单是否折叠
       * @returns {boolean} true-折叠 false-不折叠
       */
      collapseFlag() {
        return this.$store.state.settings.isCollapse
      },
      /**
       *
       * @returns {string}
       */
      issueBlogCommandName() {
        let issueBlogCommand = this.issueBlogCommand
        switch (issueBlogCommand) {
          case 1:
            return '发布博客（月）'
          case 2:
            return '发布博客（年）'
          default:
            return '未知类型'
        }
      },
      /**
       *
       * @returns {string}
       */
      blogViewCommandName() {
        let blogViewCommand = this.blogViewCommand
        switch (blogViewCommand) {
          case 1:
            return '浏览量（月）'
          case 2:
            return '浏览量（年）'
          default:
            return '未知类型'
        }
      },
      /**
       *
       */
      blogLikeCommandName() {
        let blogLikeCommand = this.blogLikeCommand
        switch (blogLikeCommand) {
          case 1:
            return '点赞量（月）'
          case 2:
            return '点赞量（年）'
          default:
            return '未知类型'
        }
      },
      /**
       *
       * @returns {string}
       */
      blogCommentCommandName() {
        let blogCommentCommand = this.blogCommentCommand
        switch (blogCommentCommand) {
          case 1:
            return '评论量（月）'
          case 2:
            return '评论量（年）'
          default:
            return '未知类型'
        }
      }
    },
    mounted() {
      this.getUserBlogStats(0, 1, '0,1,2,3')
    },
    methods: {
      /**
       * 获取用户博客统计方法
       * 刷新的数据类型（包含值（英文’,‘分割））：
       *  0：刷新用户已发布博客数
       *  1：刷新用户已发布博客的总浏览量
       *  2：刷新用户已发布博客的总点赞数量
       *  3：刷新用户已发布博客的总评论数量
       * @param {number} type      统计类型[0-已发布博客数 1-浏览次数 2-点赞数 3-评论数]
       * @param {number} valueType 数值类型[0-日 1-月 2-年]
       * @param {string} refresh   刷新的数据类型
       */
      getUserBlogStats(type, valueType, refresh) {
        // 开始数据加载
        this.dataLoad = true

        let adminVo = {
          type: type,
          valueType: valueType,
          refresh: refresh
        }

        this.$axios.$post('/sys/blog-stats/admin', adminVo)
          .then(({ data }) => {
            console.log('data', data)

            let arr = refresh.split(",")
            for (let i = 0; i < arr.length; i++) {
              let num = arr[i]
              if (num === '0') {
                this.issueBlogNum = data.issueBlogNum || 0
                continue
              }
              if (num === '1') {
                this.blogViewNum = data.blogViewNum || 0
                continue
              }
              if (num === '2') {
                this.blogLikeNum = data.blogLikeNum || 0
                continue
              }
              if (num === '3') {
                this.blogCommentNum = data.blogCommentNum || 0
              }
            }

            let title;
            if (type === 0) {
              title = this.issueBlogCommandName
            } else if (type === 1) {
              title = this.blogViewCommandName
            } else if (type === 2) {
              title = this.blogLikeCommandName
            } else {
              title = this.blogCommentCommandName
            }

            let lineEchartsDto = data.lineEchartsDto
            let seriesData = lineEchartsDto.seriesData
            let xAxisData = lineEchartsDto.xaxisData

            let bool = xAxisData.length !== 0
            this.showLineEcharts = bool
            if (bool) {
              this.initLineEcharts(title, xAxisData, seriesData)
            }

          })
          .catch(() => {})
          .finally(() => {
            // 数据加载结束
            this.dataLoad = false
          })
      },
      /**
       * 用户已发布博客数量显示类型切换事件
       * @param {number} command 最新用户已发布博客数量显示类型
       */
      switchIssueBlogTypeHandle(command) {
        if (this.issueBlogCommand === command) {
          return
        }
        this.issueBlogCommand = command

        this.getUserBlogStats(0, command, '0')
      },
      /**
       * 用户已发布博客总浏览数量显示类型切换事件
       * @param {number} command 最新用户已发布博客总浏览数量显示类型
       */
      switchBlogViewTypeHandle(command) {
        if (this.blogViewCommand === command) {
          return
        }
        this.blogViewCommand = command
        console.log('aa', this.blogViewCommand, typeof this.blogViewCommand)

        this.getUserBlogStats(1, command, '1')
      },
      /**
       * 用户已发布博客总点赞数量显示类型切换事件
       * @param command 最新用户已发布博客总点赞数量显示类型
       */
      switchBlogLikeTypeHandle(command) {
        if (this.blogLikeCommand === command) {
          return
        }
        this.blogLikeCommand = command

        this.getUserBlogStats(2, command, '2')
      },
      /**
       * 用户已发布博客总评论数量显示类型切换事件
       * @param command 最新用户已发布博客总评论数量显示类型
       */
      switchBlogCommentTypeHandle(command) {
        if (this.blogCommentCommand === command) {
          return
        }
        this.blogCommentCommand = command

        this.getUserBlogStats(3, command, '3')
      },
      /**
       * 生成echarts折线图
       * @param {string} title
       * @param {Array} xAxisData
       * @param {Array} seriesData
       */
      initLineEcharts(title, xAxisData, seriesData) {
        this.$nextTick(() => {
          // 基于准备好的dom，初始化echarts实例
          let lineChart = this.$echarts.init(this.$refs.lineChart);

          this.lineChart = lineChart

          // 使用刚指定的配置项和数据显示图表。
          lineChart.setOption(({
            // 横坐标
            xAxis: {
              data: xAxisData,
              boundaryGap: false,
              axisTick: {
                show: false
              }
            },
            grid: {
              left: 10,
              right: 10,
              bottom: 20,
              top: 30,
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              padding: [5, 10]
            },
            yAxis: {
              axisTick: {
                show: false
              }
            },
            legend: {
              data: [ title]
            },
            series: [
              {
                name: title,
                smooth: true,
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#3888fa',
                    lineStyle: {
                      color: '#3888fa',
                      width: 2
                    },
                    areaStyle: {
                      color: '#f3f8ff'
                    }
                  }
                },
                data: seriesData,
                animationDuration: 2800,
                animationEasing: 'quadraticOut'
              }
            ]
          }));
        })
      },
      /**
       * js防抖方法
       * @param func 目标方法
       * @param wait 延迟时间
       */
      resizeDebounce(func, wait) {
        if (this.resizeTimer) {
          clearTimeout(this.resizeTimer)
        }
        this.resizeTimer = setTimeout(() => {
          // 执行目标方法
          func.apply(this, arguments)

          this.resizeTimer = null
        }, wait)
      }
    }
  }
</script>

<style scoped>
  .admin-page {
    /*background-color: #f0f2f5;*/
  }
</style>

<style scoped>
  .panel-group {
    margin-top: 10px;
  }
  .panel-group .card-panel-col {
    margin-bottom: 20px;
  }
  .panel-group .card-panel {
    height: 108px;
    /*cursor: pointer;*/
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    /*box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);*/
    border-color: rgba(0, 0, 0, 0.05);
  }
  .panel-group .card-panel:hover .card-panel-icon-wrapper {
    color: #fff;
  }
  .panel-group .card-panel:hover .icon-people {
    background: #40c9c6;
  }
  .panel-group .card-panel:hover .icon-message {
    background: #36a3f7;
  }
  .panel-group .card-panel:hover .icon-money {
    background: #f4516c;
  }
  .panel-group .card-panel:hover .icon-shopping {
    background: #34bfa3;
  }
  .panel-group .card-panel .icon-people {
    color: #40c9c6;
  }
  .panel-group .card-panel .icon-message {
    color: #36a3f7;
  }
  .panel-group .card-panel .icon-money {
    color: #f4516c;
  }
  .panel-group .card-panel .icon-shopping {
    color: #34bfa3;
  }
  .panel-group .card-panel .card-panel-icon-wrapper {
    float: left;
    cursor: pointer;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }
  .panel-group .card-panel .card-panel-icon {
    float: left;
    font-size: 48px;
  }
  .panel-group .card-panel .card-panel-description {
    float: right;
    font-weight: bold;
    padding: 16px;
    /*margin: 26px;*/
    /*margin-left: 0px;*/
  }
  .panel-group .card-panel .card-panel-description .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin-bottom: 12px;
  }
  .panel-group .card-panel .card-panel-description .card-panel-num {
    font-size: 20px;
  }

  @media (max-width: 550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;
    }
    .card-panel-icon-wrapper .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
</style>
